<template>
	<view class="codeContent">
		<view class="content flex-box">
			<view class="box">
				<!-- <view class="title">护肤尊享套餐</view> -->
				<view class="code-img">
					<!-- <image :src="url+'/college/imgUrl?code='+code" class="wx-code"></image> -->
					<view class="canvas">
						<!-- 二维码插件 width height设置宽高 -->
						<canvas canvas-id="qrcode" :style="{width: `${qrcodeSize}px`, height: `${qrcodeSize}px`}" />
					</view>
				</view>
				<view class="hao">{{qrcodeText}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uQRCode from '@/common/uqrcode.js'
	export default {
		data() {
			return {
				// 二维码标识串
				qrcodeText: 'eoruw20230528',
				// 二维码尺寸
				qrcodeSize: 180,

				// 最终生成的二维码图片
				qrcodeSrc: '',
			}
		},
		onLoad(option) {
			this.qrcodeText = option.code
			//动态修改状态栏的颜色
			uni.setNavigationBarColor({
				
				backgroundColor:"#ffffff"
			})
			this.make();
		},
		methods: {
			make() {
				uni.showLoading({
					title: '二维码生成中',
					mask: true
				})

				uQRCode.make({
					canvasId: 'qrcode',
					text: this.qrcodeText,
					size: this.qrcodeSize,
					margin: 10,
					success: res => {
						this.qrcodeSrc = res
						console.log('qrcodeSrc = ' + this.qrcodeSrc);
					},
					complete: () => {
						uni.hideLoading()
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-image: linear-gradient(#b8f4e5, #f0f7f9 );
		    background-image: linear-gradient(to bottom, #be8ff0, #e9d2fa);
	}
	.codeContent{
		.content{
			background-color: #fff;
			padding:50rpx;
			width:700rpx;
			
			margin:30rpx auto;
			border-radius: 20rpx;
			text-align: center;
			.box{
				width:100%
			}
			.code-img{
				width:350rpx;
				height:350rpx;
				margin:20rpx auto;
				image{
					width:350rpx;
					height:350rpx;
				}
			}
			.hao{
				margin-top:30rpx;
			}
		}
	}
</style>
